<template>
	<view class="status_bar">
<!-- 		<view class="bg-set">
			<view class="bg-set-top"></view>
			<view class="bg-set-m"></view>
			<view class="bg-set-low"></view>
		</view> -->
		<view class="top zIndex">
			<image @click="goIndex" src="https://z3.ax1x.com/2021/07/20/WN9VBV.png"></image>
		</view>
		<view class="search bg zIndex" @click="toSearch">
			<u-search class="u-search" bg-color="#000000" border-color="#666666" :clearabled="true" :focus="true" :show-action="false" placeholder="输入项目关键词进行搜索" v-model="keyword" search-icon-color="#666666" :disabled="true" height="80" margin="0 40rpx 0 40rpx">
			  </u-search>
		</view>
		<view class="bar bg zIndex">
			<view class="barItem" :class="isbarItemImgShow == 1 ? 'barItemSelect' : ''" @click="isbarItemImgShow = 1">
				线上项目
				<view v-if="isbarItemImgShow == 1"><image class="barItemImg" src="https://z3.ax1x.com/2021/07/21/WUdG28.png"></image></view>
			</view>
			<view class="barItem barItemMiddle" :class="isbarItemImgShow == 2 ? 'barItemSelect' : ''" @click="isbarItemImgShow = 2">线下项目<view v-if="isbarItemImgShow == 2"><image class="barItemImg" src="https://z3.ax1x.com/2021/07/21/WUdG28.png"></image></view></view>
			<view class="barItem" :class="isbarItemImgShow == 3 ? 'barItemSelect' : ''" @click="isbarItemImgShow = 3">产品视频<view v-if="isbarItemImgShow == 3"><image class="barItemImg" src="https://z3.ax1x.com/2021/07/21/WUdG28.png"></image></view></view>
			<view class="content_bg"></view>
		</view>
		<!-- <view class="content" v-if="contentList && isbarItemImgShow == 1" >
			<view class="content_" v-for="(item, index) in contentList" :key="index" :class="index % 2 == 0 ? '' : 'content_even'">
				<image class="content_img" :src="item.ImgSrc" @click="goCaseDetails(index)"></image>
				<view class="content_view1">{{item.theme}}</view>
				<view class="content_view2">{{item.text}}</view>
			</view>
		</view> -->
		<view class="content" v-if="contentList && isbarItemImgShow == 1" >
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
			@scroll="scroll">
				<view class="content_" v-for="(item, index) in contentList" :key="index" :class="index % 2 == 0 ? '' : 'content_even'">
					<image class="content_img" :src="item.ImgSrc" @click="goCaseDetails(index)"></image>
					<view class="content_view1">{{item.theme}}</view>
					<view class="content_view2">{{item.text}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="viewProduct" v-if="isbarItemImgShow == 3">
			<view class="viewProduct_" v-for="(item, index) in productList">
				<video :id="'myVideo'+index" :src="item.videoSrc" :controls="false" :show-center-play-btn="false"></video>
				<image v-show="! (playBtnShowIndex == index)" class="video_play_icon" @click="playVideo(index)" src="https://z3.ax1x.com/2021/07/22/WBdTBT.png"></image>
				<view class="viewProduct_theme">{{item.theme}}</view>
				<view class="viewProduct_text">{{item.text}}</view>
			</view>
		</view>
		<view class="bg-set-low_"></view>
		<view class="bg-set-low"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				playBtnShowIndex: -1,
				playBtnShow:true,
				isbarItemImgShow: 1,
				itemIndex: 1,
				keyword: '',
				productList: [
					{
						videoSrc: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4',
						theme: '厉川品牌宣传视频',
						text: '定义当先·定义未来',
					},
					{
						videoSrc: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4',
						theme: '赛博概念视频',
						text: '定义当先·定义未来',
					},
					{
						videoSrc: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4',
						theme: '厉川品牌宣传视频',
						text: '定义当先·定义未来',
					},
					{
						videoSrc: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4',
						theme: '赛博概念视频',
						text: '定义当先·定义未来',
					}
				],
				contentList:[
					{
						ImgSrc: 'https://z3.ax1x.com/2021/07/21/WUw1eJ.png',
						theme: '蓝铅笔app4.0',
						text: '这是一款服务智能健身房会员。'
					},
					{
						ImgSrc: 'https://z3.ax1x.com/2021/07/21/WU26bV.png',
						theme: 'Smart Fitness app',
						text: '这是一款服务智能健身房会员。'
					},
					{
						ImgSrc: 'https://z3.ax1x.com/2021/07/21/WU2yD0.png',
						theme: '煮百鲜生app',
						text: '这是一款服务智能健身房会。'
					},
					{
						ImgSrc: 'https://z3.ax1x.com/2021/07/21/WU2gET.png',
						theme: '阅漫 app',
						text: '这是一款服务智能健身房会。'
					},
					{
						ImgSrc: 'https://z3.ax1x.com/2021/07/21/WU2suq.png',
						theme: 'Smart Fitness app',
						text: '这是一款服务智能健身房会员。'
					},
					{
						ImgSrc: 'https://z3.ax1x.com/2021/07/21/WU26bV.png',
						theme: 'Smart Fitness app',
						text: '这是一款服务智能健身房会员。'
					},
					{
						ImgSrc: 'https://z3.ax1x.com/2021/07/21/WUR5FS.png',
						theme: 'Smart Fitness app',
						text: '这是一款服务智能健身房会员。'
					},
					{
						ImgSrc: 'https://z3.ax1x.com/2021/07/21/WU26bV.png',
						theme: 'Smart Fitness app',
						text: '这是一款服务智能健身房会员。'
					}
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			toSearch() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			goCaseDetails(index) {
				// index 应该为id 然后获取修改的详情
				uni.navigateTo({
					url: '../caseDetails/caseDetails'
				})
			},
			playVideo(index) {
				/* 播放前关闭前一个 */
				let videoPrevious = uni.createVideoContext('myVideo' + this.playBtnShowIndex)
				videoPrevious.pause()
				
				this.playBtnShow = false
				this.playBtnShowIndex = index
				console.log("this.playBtnShowIndex", this.playBtnShowIndex)
				let video_ = uni.createVideoContext('myVideo'+index)
				console.log("video_", video_)
				video_.play()
			},
			goIndex() {
				uni.navigateTo({
					url: '../index/index'
				})
			}
		}
	}
</script>

<style scoped>
	.top{
		position: fixed;
		top: 0;
		width: 750rpx;
		height: 198rpx;
		padding-top: 88rpx;
		padding-bottom: 24rpx;
		background: linear-gradient(#503122 20%, #292929);
	}
	.top image{
		width: 144rpx;
		height: 72rpx;
		margin-left: 318rpx;
	}
	.status_bar{
		margin-top: 0;
		height: 100vh;
		/* background-color: #000000; */
		/* z-index: -1; */
	}
	.bg{
		background-color: #292929;
	}
	.bg-set{
		width: 750rpx;
		height: 100vh;
		z-index: -1;
		position: fixed;
		top: 0;
		background-color: #000000;
	}
	.bg-set-top{
		width: 750rpx;
		/* height: 240rpx; */
		height: 240rpx;
		/* opacity: 20%; */
		/* background: linear-gradient(#F45408, rgba(122,47,4,0)); */
		background: linear-gradient(#503122, #292929);
	}
	.bg-set-m{
		width: 750rpx;
		height: 170rpx;
		background-color: #292929;
	}
	.search{
		position: fixed;
		top: 198rpx;
		width: 750rpx;
		height: 80rpx;
		/* margin-top: 24rpx; */
	}
	.bg-set-low_{
		position: fixed;
		bottom: 264rpx;
		width: 750rpx;
		height: calc( 100vh - 264rpx);
		background-color: #000000;
		z-index: -1;
	}
	.bg-set-low{
		position: fixed;
		bottom: 0;
		/* top: calc(100vh - 240rpx - 170rpx); */
		width: 750rpx;
		height: 264rpx;
		z-index: -1;
		background: linear-gradient(#000000, #2f1002);
	}
	.u-search{
		width: 670rpx;
		height: 80rpx;
		
	}
	.bar{
		position: fixed;
		top: calc(198rpx + 80rpx);
		width: 750rpx;
		height: 140rpx;
		padding: 32rpx 88rpx 0 88rpx;
		font-size: 30rpx;
		color: #AAAAAA;
		
	}
	.barItem{
		display: inline-block;
		/* line-height: 42rpx; */
		vertical-align:top;
		text-align: center;
		height: 70rpx;
	}
	.barItemMiddle{
		margin: 0 106rpx 0 108rpx;
	}
	.barItemSelect{
		color: #FFFFFF;
	}
	.barItemImg{
		position: relative;
		bottom: 0;
		/* z-index: 11 !important; */
		width: 80rpx;
		height: 24rpx;
		z-index: 11;
	}
	.content{
/* 		position: relative;
		top: -40rpx;
		padding: 40rpx;
		border-radius: 40rpx 40rpx 0 0; */
		margin-top: calc(198rpx + 80rpx + 140rpx);
		padding: 0rpx 40rpx 0 40rpx;
		/* background: #000000; */
	}
	.content_bg{
		position: fixed;
		top: calc(198rpx + 80rpx + 100rpx);
		left: 0rpx;
		width: 750rpx;
		height: 40rpx;
		background-color: #000000;
		border-radius: 40rpx 40rpx 0 0;
		z-index: 10;
	}
	.content_{
		width: 324rpx;
		display: inline-block;
		margin-bottom: 40rpx;
	}
	.content_even{
		margin-left: 22rpx;
	}
	.content_img{
		width: 324rpx;
		height: 324rpx;
	}
	.content_view1{
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		margin-top: 12rpx;
	}
	.content_view2{
		font-size: 22rpx;
		color: #FFFFFF;
		opacity: 0.48;
		line-height: 32rpx;
		margin-top: 4rpx;
	}
	.zIndex{
		z-index: 10 !important;
	}
	
	/* 产品视频 */
	.viewProduct{
		margin-top: calc(198rpx + 80rpx + 140rpx);
		/* padding: 0rpx 40rpx 0 40rpx; */
	}
	.viewProduct_{
		color: #FFFFFF;
		position: relative;
	}
	.viewProduct_ video{
		width: 706rpx;
		height: 372rpx;
		margin: 0 22rpx;
		object-fit: fill;
	}
	.video_play_icon{
		position:absolute;
		top: 56rpx;
		left: 252rpx;
		width: 248rpx;
		height: 248rpx;
		z-index: 2;
	}
	.viewProduct_theme{
		font-size: 28rpx;
		line-height: 40rpx;
		margin-left: 40rpx;
	}
	.viewProduct_text{
		opacity: 0.48;
		font-size: 24rpx;
		line-height: 32rpx;
		margin: 4rpx 0 28rpx 40rpx;
	}

</style>
